<nav class="top-nav">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" ui-sref-active="active" ui-sref="app.main"><i class="icon-speedometer"></i> DASHBOARD <span class="badge badge-info">NEW</span></a>
        </li>

        <li class="nav-item">
            <a class="nav-link" ui-sref-active="active" ui-sref="app.main2"><i class="icon-speedometer"></i> DASHBOARD 2 <span class="badge badge-warning">NEW</span></a>
        </li>

        <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.components')}">
            <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.components')}" href="#"><i class="icon-puzzle"></i> Components</a>
            <ul class="nav-dropdown-items">
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.buttons"><i class="icon-puzzle"></i> BUTTONS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.social-buttons"><i class="icon-puzzle"></i> Social Buttons</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.cards"><i class="icon-puzzle"></i> CARDS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.forms"><i class="icon-puzzle"></i> FORMS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.switches"><i class="icon-puzzle"></i> SWITCHES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.components.tables"><i class="icon-puzzle"></i> TABLES</a>
                </li>
            </ul>
        </li>
        <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.icons')}">
            <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.icons')}" href="#"><i class="icon-star"></i> ICONS</a>
            <ul class="nav-dropdown-items">
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.icons.fontawesome"><i class="icon-star"></i> Font Awesome</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.icons.simplelineicons"><i class="icon-star"></i> Simple Line Icons</a>
                </li>
            </ul>
        </li>
        <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.plugins')}">
            <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.plugins')}" href="#"><i class="icon-energy"></i> Plugins</a>
            <ul class="nav-dropdown-items">
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.plugins.calendar"><i class="icon-calendar"></i> CALENDAR</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.plugins.notifications"><i class="icon-info"></i> NOTIFICATIONS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.plugins.sliders"><i class="icon-equalizer"></i> SLIDERS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="app.plugins.tables"><i class="icon-list"></i> TABLES</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link" ui-sref-active="active" ui-sref="app.forms"><i class="icon-note"></i> FORMS <span class="badge badge-danger">NEW</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" ui-sref-active="active" ui-sref="app.widgets"><i class="icon-calculator"></i> WIDGETS <span class="badge badge-info">NEW</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" ui-sref-active="active" ui-sref="app.charts"><i class="icon-pie-chart"></i> CHARTS</a>
        </li>
        <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.pages')}">
            <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.pages')}" href="#"><i class="icon-star"></i> PAGES</a>
            <ul class="nav-dropdown-items">
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="appSimple.login"><i class="icon-star"></i> Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="appSimple.register"><i class="icon-star"></i> Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="appSimple.404"><i class="icon-star"></i> Error 404</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" ui-sref-active="active" ui-sref="appSimple.500"><i class="icon-star"></i> Error 500</a>
                </li>
            </ul>
        </li>
        <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.uikits')}">
            <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.uikits')}" ui-sref-active="active" href="#"><i class="icon-layers"></i> UI Kits</a>

            <ul class="nav-dropdown-items">
                <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.uikits.invoicing')}">
                    <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.uikits.invoicing')}" href="#"><i class="icon-speech"></i> INVOICING</a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item">
                            <a class="nav-link" ui-sref-active="active" ui-sref="app.uikits.invoicing.invoice"><i class="icon-speech"></i> INVOICE</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item nav-dropdown" ng-class="{open: $state.includes('app.uikits.email')}">
                    <a class="nav-link nav-dropdown-toggle" ng-class="{active: $state.includes('app.uikits.email')}" href="#"><i class="icon-speech"></i> EMAIL</a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item">
                            <a class="nav-link" ui-sref-active="active" ui-sref="app.uikits.email.inbox"><i class="icon-speech"></i> INBOX</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" ui-sref-active="active" ui-sref="app.uikits.email.message"><i class="icon-speech"></i> MESSAGE</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" ui-sref-active="active" ui-sref="app.uikits.email.compose"><i class="icon-speech"></i> COMPOSE</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</nav>
